<template>
	<div>
		<div class="handle-box">
			<div class="row-me flex-wrap">
				<div class="margin-left20 margin-bottom20">
					<el-input v-model="query.title" placeholder="题干搜索" class="width260 margin-right10"></el-input>
					<el-select filterable v-model="query.type" placeholder="请选择题型" :clearable="true"
						class="width260 margin-right10">
						<el-option v-for="sort in types" :key="sort.id" :label="sort.name" :value="sort.id">
						</el-option>
					</el-select>
				</div>
				<div class="margin-left20 margin-bottom20">
					<el-button type="primary" @click="handleSearch">查询</el-button>
					<el-button @click="handleRefresh">重置</el-button>
				</div>
			</div>
			<el-button type="primary" @click="exportVisible=true">
				批量导出
			</el-button>
		</div>
		<el-table :data="tableData" border class="margin-top20" ref="multipleTable"
			header-cell-class-name="table-header-style" @selection-change="handleSelectionChange">
			<el-table-column type="expand">
				<template slot-scope="props">
					<b>
						<p v-html="props.row.title"></p>
					</b>
					<div v-if="(props.row.type.value == 0 || props.row.type.value == 1)&&props.row.content">
						<el-table :data="JSON.parse(props.row.content)" style="width: 100%">
							<el-table-column width="50">
								<template slot-scope="scope">{{ scope.row.title }}</template>
							</el-table-column>
							<el-table-column>
								<template slot-scope="scope">
									<p v-html="scope.row.content"></p>
								</template>
							</el-table-column>
						</el-table>
					</div>
					<br />
					<b>
						<p>正确率：<span>{{props.row.accurate||0}}%</span></p>
					</b>
					<b>
						<p>答案：<span v-html="props.row.answer"></span></p>
					</b>
					<b>
						<p>解析：<span v-html="props.row.textExplain"></span></p>
					</b>
					<b class="row-me">
						<p>来源：
						<div class="row-me row-center flex-wrap" v-if="props.row.questionSources">
							<div v-for="(item,index) in props.row.questionSources" :key="index">
								<el-tag class="margin-right10" v-if="item.name">{{item.name}}</el-tag>
							</div>
						</div>
						</p>
					</b>
				</template>
			</el-table-column>

			<!-- 表格头部 -->
			<el-table-column type="selection" width="55" align="center"></el-table-column>
			<el-table-column label="题目ID" width="80" align="center">
				<template slot-scope="scope">
					<el-button type="text" @click="openLibraryHandle1(scope.$index, scope.row.id)">
						{{ scope.row.id }}
					</el-button>
				</template>
			</el-table-column>
			<el-table-column label="题号" width="55" align="center">
				<template slot-scope="scope">
					{{ (query.pageNumber - 1) * query.pageSize + scope.$index + 1 }}
				</template>
			</el-table-column>

			<el-table-column label="题目" :show-overflow-tooltip="true">
				<template slot-scope="scope">
					<p v-html="scope.row.title"></p>
				</template>
			</el-table-column>
			<el-table-column prop="type.name" width="80" label="题型" align="center"></el-table-column>
			<el-table-column width="80" label="正确率" align="center">
				<template slot-scope="scope">
					<span>{{scope.row.accurate}}%</span>
				</template>
			</el-table-column>
			<el-table-column prop="score" width="80" label="分值" align="center"> </el-table-column>
			<el-table-column label="操作" width="260" align="center" fixed="right">
				<template slot-scope="scope">
					<el-button type="text" icon="el-icon-edit" @click="moveOne(scope.row)">置顶
					</el-button>
					<el-button type="text" icon="el-icon-edit" @click="moveUp(scope.row)">上移
					</el-button>
					<el-button type="text" icon="el-icon-edit" @click="moveDown(scope.row)">下移
					</el-button>
					<el-button type="text" icon="el-icon-edit" @click="moveMax(scope.row)">置尾
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div class="margin-top10">
			<el-pagination background layout="->,total, prev, pager, next" :current-page="query.pageNumber"
				:page-size="query.pageSize" :total="pageTotal" @current-change="handlePageChange">
			</el-pagination>
		</div>

		<!--编辑导出试题-->
		<el-dialog title="编辑导出内容" :visible.sync="exportVisible" :modal-append-to-body="false" width="50%">
			<el-form ref="form" label-width="100px">
				<el-form-item label="题目类型">
					<el-radio-group v-model="form.type">
						<el-radio v-for="(type, index) in types" :key="index" :label="type.id">{{ type.name }}
						</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="导出数量">
					<el-input v-model="form.pageSize" class="width300"></el-input>
				</el-form-item>
				<el-form-item label="是否随机显示">
					<el-switch v-model="form.ran" active-color="#13ce66" inactive-color="#ff4949"> </el-switch>
				</el-form-item>
				<el-button @click="exportQuestionBtn">导出</el-button>
				<el-button @click="exportVisible = false">取消</el-button>
			</el-form>
		</el-dialog>

		<!--导出试题展示-->
		<batchExport ref="batchExport"></batchExport>
	</div>
</template>

<script>
	import batchExport from "@/components/batchExport"
	export default {
		components: {
			batchExport
		},
		data() {
			return {
				query: {
					pageNumber: 1,
					pageSize: 30
				},
				tableData: [],
				pageTotal: 0,
				types: [],
				exportVisible: false,
				form: {},
				examPaperId: ''
			}
		},
		methods: {
			show(id) {
				this.examPaperId = id
				this.getType()
				this.getData()
			},
			//导出
			async exportQuestionBtn() {
				this.form.examPaperId = this.examPaperId
				const res = await this.$get('/admin/examPaper/getQuestionsByExamPaperId', this.form)
				if (res.code == 1000) {
					this.exportVisible = false
					this.$refs.batchExport.show(1, res.data.list)
				}
			},
			//分页
			handlePageChange(val) {
				this.query.pageNumber = val
				this.getData()
			},
			//置顶
			async moveOne(row) {
				const res = await this.$get('/admin/examPaper/moveOne', {
					examPaperId: this.examPaperId,
					questionId: row.id
				})
				if (res.code == 1000) {
					this.$message.success('置顶成功')
					this.getData()
				}
			},
			//上移
			async moveUp(row) {
				const res = await this.$get('/admin/examPaper/moveUpQuestion', {
					examPaperId: this.examPaperId,
					questionId: row.id
				})
				if (res.code == 1000) {
					this.$message.success('上移成功')
					this.getData()
				}
			},
			//下移
			async moveDown(row) {
				const res = await this.$get('/admin/examPaper/moveDownQuestion', {
					examPaperId: this.examPaperId,
					questionId: row.id
				})
				if (res.code == 1000) {
					this.$message.success('下移成功')
					this.getData()
				}
			},
			//置尾
			async moveMax(row) {
				const res = await this.$get('/admin/examPaper/moveMax', {
					examPaperId: this.examPaperId,
					questionId: row.id
				})
				if (res.code == 1000) {
					this.$message.success('置尾成功')
					this.getData()
				}
			},
			// 试题多选操作
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},
			//获取题型
			async getType() {
				const res = await this.$get('/admin/examPaper/getType', {
					examPaperId: this.examPaperId
				})
				if (res.code == 1000) {
					this.types = res.data.list
				}
			},
			//获取列表数据
			async getData() {
				this.query.examPaperId = this.examPaperId
				const res = await this.$get('/admin/examPaper/getQuestionsByExamPaperId', this.query)
				if (res.code == 1000) {
					this.tableData = res.data.list
					this.pageTotal = res.data.totalRow
				}
			},
			//搜索
			handleSearch() {
				this.query.pageNumber = 1
				this.getData()
			},
			//重置
			handleRefresh() {
				this.query = {
					pageNumber: 1,
					pageSize: 30
				}
				this.getData()
			}
		}
	}
</script>

<style>
</style>